<template>
  <div id="synclesson">
    <div class="main">
      <Row>
        <Col span="24" class="maxTitle">
        <!-- 大标题 -->
          <p>{{synclesson.maxTitle}}</p>
        </Col>
      </Row>
      <Row>
        <Col span="24" class="desc">
        <!-- 描述 -->
          <p>{{synclesson.description}}</p>
        </Col>
      </Row>
      <!-- 第几期显示 -->
      <Row
        class="number"
        v-for="(item,index) in synclesson.classes"
        :key="index"
        :style="item.selected?'border: 1px solid #f5a623;color:#f5a623;':''"
      >
        <Col span="24">
          <Row>
            <Col span="4">
              <!-- 视频箭头小图标 -->
              <Icon class="icon" type="logo-youtube" />
            </Col>
            <Col span="20">{{item.title}}</Col>
            <Col>
              <!-- 脚标提示红色 大家正在上课 -->
              <Badge :text="item.status" class="demo-badge">
                <a href="#"></a>
              </Badge>
            </Col>
          </Row>
        </Col>
      </Row>
      <Row class="card">
        <Col span="24">
          <Row>
            <!-- 菜鸟价 -->
            <Col span="24" class="bird">
              早鸟价:
              <span class="birdprice">￥{{synclesson.birdPrice}}</span>
            </Col>
          </Row>
          <Row>
            <!-- 原价 -->
            <Col span="24" class="bird">
              原&nbsp&nbsp&nbsp&nbsp价:
              <span class="delline">￥{{synclesson.originPrice}}</span>
            </Col>
          </Row>
          <Row>
            <Col span="24">
            <!-- 购买黄色按钮 -->
              <Button type="warning" class="btnpay" @click="()=>{ this.modal = true}">立即购买</Button>
                <!-- 加入QQ群按钮 -->
              <Button type="warning" v-if="synclesson.qqTeam" class="qqteam" @click="()=>{ this.modal = true}">加群交流</Button>
              <!-- 弹出对话框 -->
              <Modal v-model="modal" title="提示" @on-ok="ok">
                <p>网页开发中...</p>
              </Modal>
            </Col>
          </Row>
          <!-- 绿色对号文字 -->
          <Row v-for="(advantage,index) in synclesson.Advantages" :key="index">
            <Col span="24" class="icotext">
              <p>
                <Icon type="md-checkmark-circle" class="checkmark" />
                {{advantage}}
              </p>
            </Col>
          </Row>
        </Col>
      </Row>
    </div>
  </div>
</template>

<script>
//导入iview-ui组件
import { Row, Col, Button, Icon, Badge,Modal } from "view-design";

export default {
  name: "synclesson",
  //组件注册
  components: {
    Row,
    Col,
    Button,
    Icon,
    Badge,
    Modal
  },
  //传入属性
  props: ["synclesson"],
  data() {
    return {
      // 对话框显示变量切换
      modal: false,
    };
  },
  computed: {},
  watch: {},
  methods: {

    //对话框弹出事件
    ok() {}
  },
  created() {},
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style scoped>
/* 局部修改UI样式 */
.main {
  text-align: center;
  font-size: 10px;
  color: #5e5e5e;
}
.maxTitle {
  font-size: 19px;
  padding: 16px 35px 18px;
}
.desc {
  padding: 0 35px 35px;
  line-height: 20px;
}
.number {
  font-size: 15px;
  color: #909cb7;
  border: 1px solid #909cb7;
  width: 236px;
  height: 52px;
  border-radius: 4px;
  padding: 8px 10px;
  text-align: left;
  margin: 20px auto;
}
.icon {
  color: #909cb7;
  font-size: 26px;
  padding-top: 5px;
}
.card {
  border: none;
  margin: 20px;
  border-radius: 3px;
  box-shadow: 0 7px 14px 0 #e8e8e8;
  font-size: 16px;
  padding: 30px 16px 20px;
}
.bird {
  text-align: left;
  padding: 5px 0;
}
.birdprice {
  color: orange;
  font-size: 30px;
}
.delline {
  text-decoration: line-through;
}
.btnpay {
  padding: 0 35px;
  background-color: #fde021;
  border: none;
  color: black;
  margin: 14px 0 10px;
}
.qqteam {
  padding: 0 35px;
  border: 1px solid #fde021;
  background-color: white;
  /* border:none; */
  color: orange;
  margin: 14px 0 10px 15px;
}
.icotext {
  text-align: left;
  font-size: 10px;
  padding: 5px;
}
.checkmark {
  color: #56cbc4;
  padding-right: 5px;
}
.demo-badge {
  top: -26px;
  right: 16px;
}
</style>